<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - Asynchronous Javascript and XML</title>
<style>
   div { margin: 5px; }
</style>
</head>
<body>
<h1>Asynchronous Javascript and XML</h1>
<h3>개념</h3>
<p>Ajax : 비동기 자바스크립트와 XML</p>
<p>서버측 언어(JSP)와 통신하기 위해 XMLHttpRequest 객체를 사용</p>
<p>즉, 서버측 언어의 실행결과를 다양한 형식(텍스트, XML, JSON)의 정보로 바꿔 비동기 방식으로<br />
   클라이언트에 전달할 수 있고, 클라이언트 역시 입력 데이터를 다양한 형식(텍스트, XML, JSON)의 정보로 바꿔<br />
   서버측 언어에 비동기 방식으로 전달가능</p>
<p>Ajax의 강력한 특징은 페이지 전체를 새로고침 하지 않고 수행되는 '비동기'방식에 있음</p>
<p>따라서, 사용자 이벤트가 발생되면 전체 페이지가 아닌 특정부분만을 업데이트할 수 있음</p>
<p></p>

<h3>간단 예제 - 아이디 중복체크</h3>
<div>아이디 : <input type="text" name="uid" id="uid" onblur="checkuid()" /><span id="result"></span></div>
<div>비밀번호 : <input type="password" /></div>
<div>우편번호 : <input type="text" id="zip1" size="5" /> - <input type="text" id="zip2" size="5" />
   <button type="button" onclick="showZipcode()">우편번호 찾기</button></div>
<div>주소 : <input type="text" id="addr" size="35" /></div>
<div>나머지 주소 : <input type="text" id="etcaddr" size="45" /></div>
<div id="zipcode-modal" style="width: 420px; height: 330px; padding: 10px;
   background: #d0d0d0; border: 1px solid #ccc; position: relative; display: none;">
   <div><h1>지번주소 기반 우편번호 검색</h1></div>
   <div>검색할 주소의 동이름을 입력하세요</div>
   <div><input type="text" id="dong" /><button type="button" onclick="getZipcode()">검색</button></div>
   <div>
      <select size="10" id="ziplist" style="width: 100%;">
         <option></option>
      </select>
   </div>
   <div><button type="button" onclick="hideZipcode()">선택하고 닫기</button></div>

</div>

<script src="../js/jquery1.10.2.min.js"></script>
<script>
   function checkuid() {
      // 0. 변수 정의
      var uid = document.getElementById("uid").value;
      var result = document.getElementById("result");
      
      // 1. HttpRequest 객체 생성
      var req = null;
      if (window.XMLHttpRequest) { // ie 제외
         req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {   // ie 8 이상
         req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      // 2. 서버로 보낸 요청에 대한 응답 처리
      // 클라이언트의 요청에 대한 서버응답을 어떻게 처리할지 정함
      req.onreadystatechange = function(){
         if(req.readyState == 4) {   // 정상실행
            if(req.status == 200) {   // 응답 받음
               result.innerHTML = req.responseText;
            } else {   // 응답없음(404, 500)
               result.innerHTML = req.responseText;
            }
         } else {   // 이상 있음
            
         }
      };
      
      // 3. 실질적으로 서버에 요청 보내기
      req.open('GET', './checkuid.jsp?uid='+uid, true);
      req.send(null);
   }
</script>
<script>
   function showZipcode(){
      var zip = document.getElementById("zipcode-modal");
      zip.style.display = "block";
      zip.style.top = -150+"px";
      zip.style.left = 30+"px";
      $("#ziplist *").remove();
   }
   function hideZipcode() {
      var zip = document.getElementById("zipcode-modal");
      var selectOne = $("#ziplist").val().split(" ");
      $("#zip1").val(selectOne[0].substring(0,3));
      $("#zip2").val(selectOne[0].substring(3));
      $("#addr").val(selectOne[1]+" "+selectOne[2]);
      zip.style.display = "none";
   }   
</script>
<script>
   function getZipcode(){
      var reqAjax = $.ajax({
         url: "zipcode.jsp",
         type: "GET",
         data: {dong: encodeURI($("#dong").val())}
      });
      reqAjax.done(function (result) {
         $(result).appendTo("#ziplist");
      });
      reqAjax.fail(function (jqXHR, status) {
         alert("오류발생 : " + status);
      });
   }
</script>
</body>
</html>